<template>
  <div class="box">
    <el-form :model="roleForm" ref="roleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="角色名称">
        <el-input v-model="roleForm.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input v-model="roleForm.roleDescription"></el-input>
      </el-form-item>
      <el-form-item label="功能列表">
        <el-checkbox-group v-model="roleForm.functionList">
          <el-checkbox label="授权中心" name="type"></el-checkbox>
          <el-checkbox label="转账管理" name="type"></el-checkbox>
          <el-checkbox label="交易管理" name="type"></el-checkbox>
          <el-checkbox label="日志管理" name="type"></el-checkbox>
          <el-checkbox label="个人中心" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('roleForm')">立即创建</el-button>
        <el-button @click="resetForm('roleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "rm-entry",
    data() {
      return {
        roleForm:{
          roleName: '',
          roleDescription:'',
          functionList: []
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push({ name: 'confirm', params: { roleObj: this.roleForm,operation: '录入' }})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
.box{
  width: 70%;
  margin: 0 auto;
}
</style>
